<template>
	<view class="container">
		<block v-if="isload">
			<view v-if="sysset && sysset.pics" class="swiper-container" >
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" @change="swiperChange">
					<block v-for="(item, index) in sysset.pics" :key="index">
						<swiper-item class="swiper-item">
							<view class="swiper-item-view">
								<image class="img" :src="item" mode="widthFix" />
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="product-container"
				:style="sysset && sysset.pics.length>0?'margin-top: 20rpx;':'margin-top: 20rpx;'">
				<block v-if="datalist && datalist.length>0">
					<dp-groupby-itemlist  :data="datalist" :menuindex="menuindex"></dp-groupby-itemlist>
				</block>
				<nomore text="没有更多商品了" v-if="nomore"></nomore>
				<nodata text="没有查找到相关商品" v-if="nodata"></nodata>
				<loading v-if="loading"></loading>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				nomore: false,
				nodata: false,
				keyword: '',
				pagenum: 1,
				datalist: [],
				history_list: [],
				history_show: false,
				order: '',
				field: '',
				oldcid: "",
				catchecid: "",
				cid: "",
				clist: [],
				productlisttype: 'item2',
				showfilter: "",
				cpid: 0,
				istg: 0,
				current: 0,
				sysset: '',
			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.oldcid = this.opt.cid || '';
			this.catchecid = this.opt.cid;
			this.cid = this.opt.cid;
			this.cpid = this.opt.cpid || 0;
			if (this.cpid > 0) {
				uni.setNavigationBarTitle({
					title: '可用商品列表'
				});
			}
			var productlisttype = app.getCache('productlisttype');
			if (productlisttype) this.productlisttype = productlisttype;
			this.history_list = app.getCache('search_history_list');
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getprolist();
			}
		},
		methods: {
			getdata: function() {
				var that = this;
				that.pagenum = 1;
				that.datalist = [];
				var cid = that.opt.cid;
				var bid = that.opt.bid ? that.opt.bid : '';
				that.loading = true;
				app.get('Groupby/prolist', {
					cid: cid,
					bid: bid
				}, function(res) {
					that.loading = false;
					that.clist = res.clist;
					that.glist = res.glist;
					if (res.sysset) {
						that.sysset = res.sysset;
					}
					that.loaded();
					that.getprolist();
				});
			},
			getprolist: function() {
				var that = this;
				var pagenum = that.pagenum;
				var keyword = that.keyword;
				var order = that.order;
				var field = that.field;
				var cid = that.cid;
				var cpid = that.cpid;
				that.history_show = false;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				var bid = that.opt.bid ? that.opt.bid : '';
				app.post('Groupby/getprolist', {
					pagenum: pagenum,
					keyword: keyword,
					field: field,
					order: order,
					cid: cid,
					cpid: cpid,
					bid: bid
				}, function(res) {
					that.loading = false;
					var data = res.data;
					if (pagenum == 1) {
						that.datalist = data;
						if (data.length == 0) {
							that.nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},
			// 打开窗口
			showDrawer(e) {
				console.log(e)
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			searchChange: function(e) {
				this.keyword = e.detail.value;
				if (e.detail.value == '') {
					this.history_show = true;
					this.datalist = [];
				}
			},
			searchbtn: function() {
				var that = this;
				if (that.history_show) {
					var keyword = that.keyword;
					that.searchproduct();
				} else {
					if (that.productlisttype == 'itemlist') {
						that.productlisttype = 'item2';
						app.setCache('productlisttype', 'item2');
					} else {
						that.productlisttype = 'itemlist';
						app.setCache('productlisttype', 'itemlist');
					}
				}
			},
			searchConfirm: function(e) {
				var that = this;
				var keyword = e.detail.value;
				that.keyword = keyword
				that.searchproduct();
			},
			searchproduct: function() {
				var that = this;
				that.pagenum = 1;
				that.datalist = [];
				that.addHistory();
				that.getprolist();
			},
			sortClick: function(e) {
				var that = this;
				var t = e.currentTarget.dataset;
				that.field = t.field;
				that.order = t.order;
				that.searchproduct();
			},
			groupClick: function(e) {
				var that = this;
				var gid = e.currentTarget.dataset.gid;
				if (gid === true) gid = '';
				that.catchegid = gid
			},
			cateClick: function(e) {
				var that = this;
				var cid = e.currentTarget.dataset.cid;
				if (cid === true) cid = '';
				that.catchecid = cid
			},
			filterConfirm() {
				this.cid = this.catchecid;
				this.gid = this.catchegid;
				this.searchproduct();
				this.$refs['showRight'].close()
			},
			filterReset() {
				this.catchecid = this.oldcid;
				this.catchegid = '';
			},
			filterClick: function() {
				this.showfilter = !this.showfilter
			},
			addHistory: function() {
				var that = this;
				var keyword = that.keyword;
				if (app.isNull(keyword)) return;
				var historylist = app.getCache('search_history_list');
				if (app.isNull(historylist)) historylist = [];
				historylist.unshift(keyword);
				var newhistorylist = [];
				for (var i in historylist) {
					if (historylist[i] != keyword || i == 0) {
						newhistorylist.push(historylist[i]);
					}
				}
				if (newhistorylist.length > 5) newhistorylist.splice(5, 1);
				app.setCache('search_history_list', newhistorylist);
				that.history_list = newhistorylist
			},
			historyClick: function(e) {
				var that = this;
				var keyword = e.currentTarget.dataset.value;
				if (keyword.length == 0) return;
				that.keyword = keyword;
				that.searchproduct();
			},
			deleteSearchHistory: function() {
				var that = this;
				that.history_list = null;
				app.removeCache("search_history_list");
			},
			swiperChange: function(e) {

				var that = this;

				that.current = e.detail.current

			},
		}
	};
</script>
<style>
	.search-container {
		position: fixed;
		width: 100%;
		background: #fff;
		z-index: 9;
		top: var(--window-top)
	}

	.topsearch {
		width: 100%;
		padding: 16rpx 20rpx;
	}

	.topsearch .f1 {
		height: 60rpx;
		border-radius: 30rpx;
		border: 0;
		background-color: #f7f7f7;
		flex: 1
	}

	.topsearch .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10px
	}

	.topsearch .f1 input {
		height: 100%;
		flex: 1;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.topsearch .search-btn {
		display: flex;
		align-items: center;
		color: #5a5a5a;
		font-size: 30rpx;
		width: 60rpx;
		text-align: center;
		margin-left: 20rpx
	}

	.search-navbar {
		display: flex;
		text-align: center;
		align-items: center;
		padding: 5rpx 0
	}

	.search-navbar-item {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		position: relative;
		font-size: 28rpx;
		font-weight: bold;
		color: #323232
	}

	.search-navbar-item .iconshangla {
		position: absolute;
		top: -4rpx;
		padding: 0 6rpx;
		font-size: 20rpx;
		color: #7D7D7D
	}

	.search-navbar-item .icondaoxu {
		position: absolute;
		top: 8rpx;
		padding: 0 6rpx;
		font-size: 20rpx;
		color: #7D7D7D
	}

	.search-navbar-item .iconshaixuan {
		margin-left: 10rpx;
		font-size: 22rpx;
		color: #7d7d7d
	}

	.search-history {
		padding: 24rpx 34rpx;
	}

	.search-history .search-history-title {
		color: #666;
	}

	.search-history .delete-search-history {
		float: right;
		padding: 15rpx 20rpx;
		margin-top: -15rpx;
	}

	.search-history-list {
		padding: 24rpx 0 0 0;
	}

	.search-history-list .search-history-item {
		display: inline-block;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		margin: 0 10rpx 10rpx 0;
		background: #ddd;
		border-radius: 10rpx;
		font-size: 26rpx;
	}

	.filter-scroll-view {
		margin-top: var(--window-top)
	}

	.search-filter {
		display: flex;
		flex-direction: column;
		text-align: left;
		width: 100%;
		flex-wrap: wrap;
		padding: 0;
	}

	.filter-content-title {
		color: #999;
		font-size: 28rpx;
		height: 30rpx;
		line-height: 30rpx;
		padding: 0 30rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx
	}

	.filter-title {
		color: #BBBBBB;
		font-size: 32rpx;
		background: #F8F8F8;
		padding: 60rpx 0 30rpx 20rpx;
	}

	.search-filter-content {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 20rpx;
	}

	.search-filter-content .filter-item {
		background: #F4F4F4;
		border-radius: 28rpx;
		color: #2B2B2B;
		font-weight: bold;
		margin: 10rpx 10rpx;
		min-width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		padding: 0 30rpx
	}

	.search-filter-content .close {
		text-align: right;
		font-size: 24rpx;
		color: #ff4544;
		width: 100%;
		padding-right: 20rpx
	}

	.search-filter button .icon {
		margin-top: 6rpx;
		height: 54rpx;
	}

	.search-filter-btn {
		display: flex;
		padding: 30rpx 30rpx;
		justify-content: space-between
	}

	.search-filter-btn .btn {
		width: 240rpx;
		height: 66rpx;
		line-height: 66rpx;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 33rpx;
		color: #2B2B2B;
		font-weight: bold;
		font-size: 24rpx;
		text-align: center
	}

	.search-filter-btn .btn2 {
		width: 240rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 33rpx;
		color: #fff;
		font-weight: bold;
		font-size: 24rpx;
		text-align: center
	}

	.product-container {
		width: 100%;
		margin-top: 190rpx;
		font-size: 26rpx;
		padding: 0 24rpx
	}

	.swiper-container {
		position: relative
	}

	.swiper {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
		margin: 0 auto;
	}

	.swiper-item-view {
		width: 100%;
		height: 320rpx;
	}

	.swiper .img {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}
</style>